Code Garden

Appearance

html-01 基础知识 ​

一、注释方法 ​

html 表示超文本标记语言，结构 用来注释

css 表示层叠样式表，样式 用</* */>注释

js 表示脚本语言，行为动作 单行用//注释，多行用</* */>

二、介绍 ​

html语言，用标记标签来描述网页的。

标签成对出现的，单标签的叫空标签或自闭合标签。

自闭合标签：<br>、<hr>、<input>、<img>、<meta>、<link>

三、常用浏览器及内核 ​

谷歌 ---webkit blink

火狐 ---gecko

safari ---webkit

opera ---开始webkit 后来blink

ie ---trident

五、标签 ​

h1-h6 六级标签，数字越大文字越小。p代表段落

h1每个页面最好只用一次，h2-h6可以随便用。

br 强制换行，是自闭合标签(空标签)。

六、页面的基本结构 ​

  1. <!DOCTYPE html> 声明文档，告诉浏览器的解析器用哪种规范来解析文档
html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> // 文档使用的编码格式
    <title>Document</title>
</head>
<body>
</body>
</html>
  1. meta标签里面包含了页面的元信息（关键字，描述），页面的编码格式（字符编码，字符集），
  2. 常用的编码格式有:gb2312(国际2312),gbk(国标扩),UTF-8。
  3. body标签里面是页面的主体

七、标签分类 ​

  1. 块标签

    单独占用一行，可以设置所有的样式

    常用的块标签有：h1-h6,p,div,ul,li,ol,dl,dt,dd

    块标签里面可以包含其他的块标签，内联标签，内联块都行

    但是p标签里面不能包含块标签

  2. 内联标签(行内标签) 在同一行显示，显示不完换行，不可以设置所有样式(比如宽度高度);

    常用的内联标签有：strong,b,em,i,span,a

    内联标签的margin值和padding值只能只能设置左右，不能设置上下。

    内联标签里面不可以包含块标签，但是a标签可以放。

    内联元素出现空格如何解决：

  3. 删除回车。（不提倡，不直观）。

  4. 给父元素设置font-size:0；给子元素设置font-size恢复子元素的字体。

  5. 内联块标签(行内块标签) 在同一行显示，显示不完换行，可以设置所有属性，可以设置宽高。

常用的内联块标签有：img

给img标签的父元素设置font-size:0;可以解决图片间隙

八、CSS ​

  1. 在head标签里面写style标签
  2. 语法：选择器
html
<style>
div {
    color: red;
}
</style>
  1. 属性名和属性值中间用冒号隔开。

九、div和span标签 ​

  1. div标签 ：没有任何语义,可以把他看做一个盒子,一个块,或者一部分,块标签。
  2. span标签：没有任何语义,内联标签。

十、无序列表。 ​

  1. ul标签和li标签配合使用，ul标签只能放li标签，li标签可以放其他标签。
  2. 每个li前面都有个默认的实心圆，想改变默认的小圆点可以在li标签里面设置 type="circle" 空心圆（了解）

type="square" 方块

想取消默认的点:需要设置CSS属性：list-style:none;

ul和li都是块标签。

十一、有序列表 ​

ol标签和li标签配合使用，每个li前面都有默认的序号，改变需要在ol标签设置

type="a" //小写a顺序排序

type="A" //大写A顺序排序

type="I" //罗马数字顺序排列

type="i" //罗马数字顺序小写排列

取消默认设置CSS属性：list-style:none;

倒序显示：reversed，从3开始倒序，start="3"；

ol和li都是块标签

li的父元素必须是ul或ol。

十二、定义列表 ​

dl,dt,dd配合使用，dl是dt和dd的父元素，dt,dd是兄弟元素

dl的直接子元素只能是dt,dd，dt和dd里面可以包含其他元素

dd是对dt的解释和说明

dl,dt,dd都是块元素

十三、文字加粗，偏斜 ​

  1. strong,b都可以让文字加粗，其中strong标签更具有强调的意义。
  2. em,i都可以让文字倾斜，其中em更具有强调的意义。

十四、图片标签 ​

1.img标签，自闭合标签(空标签)； src="图片路劲"；

alt="图片的描述文字"； 当图片加载不出来的时候会显示这段文字。

title="图片的标题"；鼠标放上去显示这段文字。（所有的标签都可以有title属性）

srcset='图片地址 2x' 2x和3x根据密度区分图片，800w根据宽度适应图片；也可以写dpi，css可以写背景图时用image-set属性名；

width="500",height="500"；

十五、路径 ​

  1. 绝对路径；（完整路径） （1）从盘符开始的

    （2）从具体链接http开始的

  2. 相对路径；（文件夹下的路径） （1）在同一个目录下直接写文件名字(包含扩展名)，或者写./文件名字；

（2）当被链接的文件在当前文件的下一级文件夹里，写文件夹的名字/被链接的文件名字。

（3）当被链接的文件在当前文件的上一级，用../上一级链接的文件

十六、语义化 ​

语义化是什么：用合理的html标签和特有的属性来格式化文档的内容。

语义化的有什么好处：

  1. 在没有css的情况下，页面还能呈现很好的页面结构。
  2. 提高代码的可读性，便于后期维护。
  3. 提高用户的体验，比如：给img标签设置title alt。
  4. 对seo有帮助。（seo是搜索引擎优化）。

面试题 ​

● 简述<!doctype>的作用？

● 常见的浏览器及其内核？

● 常见的块级标签和行内标签分别有哪些？

● b和strong（i和em）标签的区别？

● 谈谈对语义化的理解？

Released under the MIT License.

Copyright © 2022-备案号：京ICP备2022004926号-1